<template>

    <div class="courselist_page">
       <div   style="margin-left: 160px">
           <div :modal="map"><el-button type="primary" plain @click="allproduct">全部</el-button></div>
           <div style="margin-left: 70px;margin-top: -70px" :modal="maps">
               <el-button type="primary" plain v-for="butt in menuData" :value="butt.id" style="margin-left: 10px;margin-top:30px"
                          @click="getCourseByMenu(butt.id)">{{butt.categoryname}}</el-button>
           </div>
       </div>
        <div class="course_content">
            <ul class="clearfix">
                <li v-for="item in results" >
                    <div class="course_info">
                        <div class="img_box">
                            <router-link :to="{name: 'DetailId', params: {id: item.id}}">
                                <img class="course_img" :src="item.img" >
                            </router-link>
                        </div>
                        <span class="price_box">￥{{item.outprice}}/{{item.spec.specname}}-----{{item.shop.name}}</span>
                        <p style="margin-top: 10px;margin-bottom: 10px">{{item.goodsname}}</p>
                       <!-- <p class="el-icon-goods"  style="color: #99A6C4;font-size: 1px">{{item.name}}</p>-->
                    </div>
                </li>
            </ul>
        </div>

       <!-- <RightTap :weiVisable="weiVisable" ></RightTap>-->
        <div class="pageclass">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import HeaderList from "@/components/HeaderList";
    import RightTap from "@/components/RightTap";

    export default {
        name: "Goodslist",
        components: {
            HeaderList,
            RightTap
        },
        data () {
            return {
                weiVisable:true,
                menuData:{},
                search: {},
                results :[],
                pageSizes:[24,32,44,56],
                currentPage:1,
                pageSize:24,
                total:0,
                map:{},
                maps:{
                    categoryid:null,
                },
                goodsoneName:this.$route.params.name,
            }
        },
        //初始化加载
        created() {
            this.getAllMenu()
            this.initGoodsTable();
        },
        watch: {
            //监听路由地址的改变
            '$route.params':{
                handler(val){
                    console.log(val.name)
                    this.goodsoneName=val.name
                    this.initGoodsTable();
                },
                deep:true
            }
        },
        methods:{
            //button---全部
            allproduct(){
                var that=this;
                if (that.map.goodsname=='\'\''){
                    console.log(that.map.goodsname)
                    that.$http.post("/goods/goods/selectBycategoryid?currentPage=" + that.currentPage + "&pageSize=" + that.pageSize, that.map).then(resp => {
                        if (resp.data.code == 2000) {
                            that.results = resp.data.data.list;
                            that.total = resp.data.data.total;
                        }
                    })
                }else {
                    that.$router.push({
                        path: `/goodslist/\'\'`
                    });
                }
                /*this.map.goodsname='';
                that.$http.post("/goods/goods/selectBycategoryid?currentPage=" + that.currentPage + "&pageSize=" + that.pageSize, that.map).then(resp => {
                    if (resp.data.code == 2000) {
                        that.results = resp.data.data.list;
                        that.total = resp.data.data.total;
                    }
                })*/
                // that.$router.push({
                //     path: `/goodslist/\'\'`
                // });
            },
            //查询搜索的条件--查出button
            getAllMenu(){
               var that = this
                that.$http.get("goods/category/selecg").then(resp=>{
                    that.menuData = resp.data.data;
                })
            },

            //button 根据类别查询商品
            getCourseByMenu(id){
               var that=this;
               that.maps.categoryid=id;
                console.log(that.maps);
                that.$http.post("/goods/goods/selectBycategory?currentPage="+that.currentPage+"&pageSize="+that.pageSize, that.maps).then(resp=>{
                    if (resp.data.code==2000){
                        that.results = resp.data.data.list;
                        that.total = resp.data.data.total
                    }else if(resp.data.code==5000){
                        this.$message.success(resp.date.msg)
                    }
                })
            },
            //初始化-查询所有的商品信息
            initGoodsTable(){
                var that=this;
                    that.map.goodsname = that.goodsoneName;
                    that.$http.post("/goods/goods/selectBycategoryid?currentPage=" + that.currentPage + "&pageSize=" + that.pageSize, that.map).then(resp => {
                        if (resp.data.code == 2000) {
                            that.results = resp.data.data.list;
                            that.total = resp.data.data.total;

                        }
                    })
            },

            /*分页*/
            handleSizeChange(val) {
                this.pageSize = val;
                this.initGoodsTable();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initGoodsTable();
            },
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .myLink:hover{
        color: #000;
        background-color: black;
    }

    .pageclass{
        text-align: center;
    }
    .courselist_page {
        #top{
            height: 30px;
            margin-left: 200px;
            margin-top: 10px;
            font-size: 17px;
            ul{
                width: 1200px;
                margin: 0 auto;
            }
            li {
                float: left;
                border-radius: 6px;
            }
        }
        .course_content {
            background: rgb(245, 245, 245);
            padding: 30px 0 10px 0;
            ul {
                width: 1200px;
                margin: 0 auto;
            }
            li {
                float: left;
                border-radius: 6px;
                background: #fff;
                margin: 0px 20px 20px 0px;
                &:nth-child(4n) {
                    margin-right: 0px;
                }
            }
        }

        .content_ul {
            display: inline-block;
            margin-top: 23px;
            li {
                float: left;
                font-size: 14px;
                height: 26px;
                line-height: 26px;
                padding: 0 6px;
                border-radius: 6px;
                margin: 0 6px;
                a:hover {
                    color: red;
                    text-decoration: none;
                }
                &.now {
                    background: rgb(51, 51, 51);
                    a {
                        color: #fff;
                    }
                }
            }
        }

        .course_info {
            display: block;
            width: 285px;
            height: 240px;
            border-radius: 6px;
            position: relative;
            &:hover {
                text-decoration: none;
                color: #000;
                box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.2);
                transform: translateY(-2px);
                transition: all .3s;
            }
            .img_box {
                position: relative;
                width: 285px;
                height: 140px;
                .qizi {
                    background: url('../../../assets/image/activity/qizi.png') no-repeat center;
                    position: absolute;
                    top: 0;
                    left: 10px;
                    width: 46px;
                    height: 43px;
                    padding-top: 3px;
                    color: #fff;
                    font-size: 14px;
                    text-align: center;
                }
                .course_img {
                    width: 285px;
                    height: 140px;
                    border-radius: 6px 6px 0 0;
                }
            }
            p {
                font-size: 16px;
                margin-top: 5px;
                padding: 0 10px;
                word-break: break-all;
            }
            .price_box {
                font-size: 16px;
                position: absolute;
                bottom: 15px;
                left: 10px;
                color: red;
            }
        }
    }
</style>
